<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb> <br><br> 
    <!-- 主体区域 -->
    <el-card class="mt16">
      <el-row>
        <el-col>
          <el-button type="primary" @click="addCateDia">添加分类</el-button>
        </el-col>
      </el-row> <br>

      <!-- 分类表格数据 -->
      <el-table border class="mt16" :data="goodsCateData" row-key="cat_id">
        <el-table-column label="#" type="index">
          <template slot-scope="scope">
            <div>{{ scope.row.index }}</div>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="cat_name"></el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="scope">
            <div>
              <i
                v-if="!scope.row.cat_deleted"
                class="el-icon-success"
                style="color: #1ad31a"
              ></i>
              <i v-else class="el-icon-error" style="color: #f00"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <div>
              <!-- {{scope.row}} -->
              <el-tag :type="typeArr[scope.row.cat_level]">
                {{ scope.row.cat_level | rank }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="EditCateDia(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" icon="el-icon-delete"
               @click="del(scope.row)" >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="queryInfo.pagesize"
        layout="sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog @close="resetForm" title="添加分类" :visible.sync="isAddCate">
      <el-form :model="addCateForm">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="addCateForm.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级分类" label-width="80px">
          <!-- 级联选择器 -->
          <!-- <p>{{ checkCateArr }}---父id:{{ current_cat_id }}</p> -->
          <el-cascader
            ref="twoCateRef"
            v-model="checkCateArr"
            :options="twoCateData"
            :props="defaultProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddCate = false">取 消</el-button>
        <el-button type="primary" @click="addCateOk">确 定</el-button>
      </div> 
    </el-dialog> 

    <!-- 编辑分类对话框 -->
    <el-dialog @close="resetForm" title="编辑分类" :visible.sync="isEditCate">
      <el-form :model="EditCateForm">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="EditCateForm.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditCate = false">取 消</el-button>
        <el-button type="primary" @click="updateCateOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'goodscate',
  data() {
    return {
      isEditCate: false,
      EditCateForm: {
        cat_name: ''
      },
      checkCateArr: [],
      twoCateData: [],
      defaultProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        label: 'cat_name',
        children: 'children',
        value: 'cat_id'
      },
      //绑定分类数据
      addCateForm: {
        cat_name: '',
        cat_pid: '',
        cat_level: ''
      },
      isAddCate: false,
      typeArr: {
        "0": 'primary',
        1: 'success',
        2: 'warning'
      },
      //分类总条数
      total: 0,
      //分类数据
      goodsCateData: [],
      //查询条件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      }
    }
  },
  created() {
    this.getGoodsCateList()
  },
  methods: {
    //删除
  async del(row){
        console.log('删除',row) 
       await this.$API.delgoodsCateApi(row.cat_id) 
       this.getGoodsCateList() 
       
    },
    //点击确定更新
    async updateCateOk() {
      console.log('要更新的对象：', this.EditCateForm)
      //解构赋值
      const { cat_id: cadId, cat_name: catName } = this.EditCateForm
      //调用编辑分类的接口
      const res = await this.$API.editGoodsCateApi(cadId, catName)
      console.log(res) 
      this.isEditCate = false   //关闭模态框
      this.getGoodsCateList()  //调用
    },
    //点击打开编辑对话框   传row  传整条数据
    EditCateDia(row) {
      console.log('row:', row)
      //解构赋值  数据回填
      this.EditCateForm.cat_name = row.cat_name
      this.EditCateForm.cat_id = row.cat_id
      this.isEditCate = true
    },
    //重置分类默认值
    resetForm(){
      this.addCateForm = {}    //默认为对象
      this.checkCateArr = []   //默认为数组
    },
    //确定向后台添加数据
    async addCateOk() {
      //判断数组长度不为0时
      if (this.checkCateArr.length !== 0) {
        this.addCateForm.cat_pid = this.current_cat_id
        this.addCateForm.cat_level = this.checkCateArr.length
      } else {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
      //调用添加分类的接口
      const res = await this.$API.addGoodsCateApi(this.addCateForm)
      console.log(res)
      //模态框隐藏
      this.isAddCate = false
       this.getGoodsCateList()  //调用
    },
    //监听选择分类改变的方法
    handleChange() {
      this.$refs.twoCateRef.dropDownVisible = false
    },
    //打开添加分类对话框
    async addCateDia() {
      //调分类接口
      const res = await this.$API.getGoodsCateListApi({ type: 2 })
      console.log('二级分类：', res)
      this.twoCateData = res
      console.log('twoCateRef:', this.$refs.twoCateRef)
      this.isAddCate = true
    },
    //分页条数
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getGoodsCateList()
    },
    //分页页数
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getGoodsCateList()
    },
    async getGoodsCateList(){ 
      //请求接口
      const res = await this.$API.getGoodsCateListApi(this.queryInfo)
      console.log('res:', res)
      const { total, result } = res
      result.forEach((item, index) =>{ 
        item.index = index + 1
      })
      this.goodsCateData = result
      this.total = total
    }
  },
  computed: {
    current_cat_id() {
      return this.checkCateArr[this.checkCateArr.length - 1]
    }
  }
}
</script>
<style scoped>
.el-radio {
  position: absolute;
  width: 100%;
  height: 25px;
}

/* .el-radio__inner {
  display: none;
} */
</style>

